<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="page-pagination clearfix" th:unless="${#lists.isEmpty(page.content) }"
     th:object="${page}">

    <div class='pull-left form-control-static'>共<b class='text-danger' th:text="${page.totalElements}">110</b>条记录
    </div>
    <ul class="pagination pagination-sm pull-right" data-th-if="${page.totalPages le 7}">
        <!-- 上一页 -->
        <li class="page-item" data-th-classappend="*{first} ? 'disabled' : ''">
            <a href="javascript:void(0);"
               data-th-classappend="${page.number >0 } ? 'page-link' : ''"
               data-th-attr="data-pageindex=${page.number} - 1"
               aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
        </li>
        <!-- 迭代生成页码 -->
        <li class="page-item" data-th-each="i : ${#numbers.sequence(1, page.totalPages)}"
            data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''">
            <a class="page-link" data-th-attr="data-pageindex=${i} - 1" href="javascript:void(0);">
                <span data-th-text="${i}"></span>
            </a>
        </li>
        <!-- 下一页 -->
        <li class="page-item" data-th-classappend="*{last} ? 'disabled' : ''">
            <a href="javascript:void(0);"
               data-th-classappend="*{last} ? '' : 'page-link'"
               data-th-attr="data-pageindex=${page.number} + 1"
               aria-label="Next">
                <span aria-hidden="true">下一页</span>
            </a>
        </li>
    </ul>
    <!-- 处理页数大于7 的情况 -->
    <ul class="pagination pagination-sm pull-right" data-th-if="${page.totalPages gt 7}">
        <!-- 上一页 -->
        <li class="page-item" data-th-classappend="*{first} ? 'disabled' : ''">
            <a href="javascript:void(0);"
               data-th-classappend="*{first} ? '' : 'page-link'"
               data-th-attr="data-pageindex=${page.number} - 1"
               aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
        </li>

        <!-- 系统首页 -->
        <li class="page-item" data-th-classappend="${(page.number + 1) eq 1} ? 'active' : ''">
            <a href="javascript:void(0);" class="page-link" data-th-attr="data-pageindex=0">1</a>
        </li>

        <!-- 当前页面小于等于4 -->
        <li class="page-item" data-th-if="${(page.number + 1) le 4}"
            data-th-each="i : ${#numbers.sequence(2,5)}"
            data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''">
            <a class="page-link" href="javascript:void(0);" data-th-attr="data-pageindex=${i} - 1">
                <span data-th-text="${i}"></span>
            </a>
        </li>

        <li class="page-item disabled" data-th-if="${(page.number + 1) le 4}">
            <a href="javascript:void(0);" class="page-link">
                <span aria-hidden="true">...</span>
            </a>
        </li>

        <!-- 最后一页与当前页面之差，小于等于3 -->
        <li class="page-item disabled" data-th-if="${(page.totalPages-(page.number + 1)) le 3}">
            <a href="javascript:void(0);" class="page-link">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <li class="page-item" data-th-if="${(page.totalPages-(page.number + 1)) le 3}"
            data-th-each="i : ${#numbers.sequence(page.totalPages-4, page.totalPages-1)}"
            data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''">
            <a class="page-link" href="javascript:void(0);" data-th-attr="data-pageindex=${i} - 1">
                <span data-th-text="${i}"></span>
            </a>
        </li>

        <!-- 最后一页与当前页面之差大于3，且  当前页面大于4-->
        <li class="page-item disabled"
            data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
            <a href="javascript:void(0);" class="page-link">
                <span aria-hidden="true">...</span>
            </a>
        </li>
        <li class="page-item"
            data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
            <a href="javascript:void(0);" class="page-link" data-th-attr="data-pageindex=${page.number} - 1">[[${page.number}]]</a>
        </li>
        <li class="page-item active"
            data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
            <a href="javascript:void(0);" class="page-link" data-th-attr="data-pageindex=${page.number}">[[${page.number
                + 1}]]</a>
        </li>
        <li class="page-item"
            data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
            <a href="javascript:void(0);" class="page-link" data-th-attr="data-pageindex=${page.number} + 1">[[${page.number
                + 2}]]</a>
        </li>

        <li class="page-item disabled"
            data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
            <a href="javascript:void(0);" class="page-link">
                <span aria-hidden="true">...</span>
            </a>
        </li>

        <!-- 最后一页 -->
        <li class="page-item" data-th-classappend="${(page.number + 1) eq page.totalPages} ? 'active' : ''">
            <a href="javascript:void(0);" class="page-link"
               data-th-attr="data-pageindex=${page.totalPages} - 1">[[${page.totalPages}]]</a>
        </li>

        <!-- 下一页 -->
        <li class="page-item" data-th-classappend="*{last} ? 'disabled' : ''">
            <a href="javascript:void(0);"
               data-th-classappend="*{last} ? '' : 'page-link'"
               data-th-attr="data-pageindex=${page.number} + 1"
               aria-label="Next">
                <span aria-hidden="true">下一页</span>
            </a>
        </li>
    </ul>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    var size = [[${page.size}]];

    function initPage(size, index) {
        var $form = $("#search-form");
        if (!$form[0]) {
            return;
        }
        var $sizeInput = $form.find("input[name='size']");
        var hiddenSizeDiv = ['<input type="hidden" name="size" value="' + size + '">'];
        if ($sizeInput[0]) {
            $sizeInput.val(size);
        } else {
            $form.append(hiddenSizeDiv.join(''));
        }

        var $pageInput = $form.find("input[name='page']");
        var hiddenPageDiv = ['<input type="hidden" name="page" value="' + index + '">'];
        if ($pageInput[0]) {
            $pageInput.val(index);
        } else {
            $form.append(hiddenPageDiv.join(''));
        }
        return $form;
    }

    $("#change-page-num").on('change', function () {
        var index = parseInt($(this).val());
        if (isNaN(index)) {
            $(this).val('');
            return;
        }
        var $form = initPage(size, index - 1);
        if ($form) {
            $form.submit();
        }
    });
    $("#change-page-size").on('change', function () {
        var size = $(this).val();
        var $form = initPage(size, 0);
        $form.submit();
    });
    $("a.page-link").on('click', function () {
        var index = $(this).data("pageindex");
        var $form = initPage(size, index);
        if ($form) {
            $form.submit();
        }
    });
</script>
</html>
